<template>
  <page-view>
    <div class=" bg-backgroundColor p-[20px]">
      <div class=" content-box flex flex-row ">
        <div class=" w-[260px] px-[10px] text-[#fff] mr-[10px]">
          <p class=" text-[28px] text-center bg-[#adb5bd] p-5 shadow-md rounded-sm">宠物商城</p>
          <div class="  mt-15 relative">
            <ul class=" product_dir  bg-slate-50 shadow-md rounded-sm">
              <li class=" relative" v-for="i in product_dir_list" :key="i">
                <p class=" absolute top-0 bottom-0 left-3 right-0  flex items-center z-10"
                  @click="switchType($event.target.innerText)">{{ i }}</p>
                <div class=" dynamic_box"></div>
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </li>
            </ul>
            <div class=" absolute h-[400px] w-[595px] bg-slate-50 top-0 right-[-600px] z-30 shadow-md"
              v-show="isShowGoods"></div>
          </div>
          <div class="mt-[20px]">
            <img src="../../assets/img/pet-illustration02.webp">
          </div>
        </div>
        <div class=" p-[20px] flex-1 overflow-hidden bg-[#f1f3f5]">
          <div class=" h-[410px] bg-[#fff] px-[20px]">
            <div class=" flex justify-center" v-show="!goodsInfo.total">
              <img src="../../assets/svg/暂无数据.svg" alt="暂无数据" class=" w-[400px]">
            </div>
            <el-carousel height="410px" direction="vertical" :autoplay="true">
              <el-carousel-item v-for="item in goodsInfo.goodsInfoInfoData.slice(0, 4)" :key="item">
                <div class=" flex flex-row justify-center">
                  <img :src="item.pic.split(',')[0]" class=" h-[400px]">
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class=" text-[20px] mt-[40px] mb-[10px]">{{ goodsInfo.titleName }}</div>
          <div class="product_item_box" v-show="!isShowWait">
            <div class="good_box" v-for="item in goodsInfo.goodsInfoInfoData" :key="item"
              @click="$router.push({ name: 'goodsDetail', params: { id: item.id } })">
              <div class=" h-[128px] w-full flex justify-center">
                <img :src="item.pic.split(',')[0]" class=" h-full">
              </div>
              <div class=" px-5">
                <p class="text-[18px] font-bold mt-5 truncate ">{{ item.goodName }}</p>
                <p class="text-[#c92a2a] mt-5 text-[18px] flex">￥<span>{{ item.price }}</span>
                <p class="xxx  ml-[60px]">已售:{{ item.saleNumber }}</p>
                </p>
                <div class="good_content">{{ item.goodDescription }}</div>
              </div>
              <div class="good_detail">查看详情</div>
            </div>
          </div>
          <div v-show="isShowWait">
            <video src="../../assets/img/没有信号.mp4" class=" w-[200px]" autoplay loop muted></video>
            <div class="  msg_box">
              数据加载中······
            </div>
          </div>
          <div class=" mt-[23px] flex justify-center">
            <el-pagination background layout="prev, pager, next,total" :page-size="searchObj.pageSize"
              :total="goodsInfo.total" @current-change="currentChange" :current-page="searchObj.page" />
          </div>
        </div>
      </div>
    </div>
  </page-view>
</template>
<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import API from "../../utils/API";
const searchObj = reactive({
  page: 1,
  pageSize: 12,
  goodCategory: ''
})

const isShowGoods = ref(false);
const product_dir_list = [
  "宠物主粮",
  "宠物零食",
  "宠物玩具",
  "宠物清洁",
  "宠物保健",
  "宠物护理",
  "宠物生活",
  "宠物牵引",
  "宠物洗澡",
  "宠物服饰",
];


const goodsInfo = reactive({
  goodsInfoInfoData: [],
  total: 0,
  titleName: "所有商品"
})

const isShowWait = ref(false)
const querySelectAll = () => {
  isShowWait.value = true
  API.goodsInfo.querySelectInfo(searchObj).then(result => {
    console.log(result);
    goodsInfo.goodsInfoInfoData = result.records;
    goodsInfo.total = result.total;
    console.log(goodsInfo.goodsInfoInfoData);
  }).catch(error => {
    console.log(error);
  }).finally(() => {
    isShowWait.value = false;
  })
}

// 分页
const currentChange = (index) => {
  searchObj.page = index;
  querySelectAll();
}

const switchType = (i) => {
  // console.log(i);
  goodsInfo.titleName = i
  searchObj.goodCategory = i.slice(2, 4);
  querySelectAll();
}

onMounted(() => {
  querySelectAll();
})
</script>
  
<style scoped lang="scss">
// 多行省略
@mixin text_overflow {
  display: -webkit-box;
  @content;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.product_dir {
  padding: 20px 12px;

  li {
    @apply text-[14px] cursor-pointer text-[#000000] h-[40px] flex items-center justify-end;
    letter-spacing: 13px;
    border-bottom: 1px dashed #1d191a;
    transition: all 0.5s linear;

    .dynamic_box {
      @apply bg-[#99a9bf] absolute w-full h-full;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.9s linear;
    }

    &:hover {
      color: #ffff;

      .dynamic_box {
        transform: scaleY(1);
        transform-origin: left;
      }
    }

  }

  li+li {
    margin-top: 10px;
  }
}

.product_item_box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  grid-gap: 10px;

  .good_box {
    position: relative;
    @apply w-[220px] h-[280px] bg-[#ffffff] cursor-pointer overflow-hidden transition-shadow duration-500 ease-linear;

    .good_content {
      font-size: 13px;
      margin-top: 15px;

      @include text_overflow() {
        -webkit-line-clamp: 2;
      }
    }

    &:hover {
      box-shadow: 0 0 7px 5px rgb(186, 185, 185);

      .good_detail {
        bottom: 0;
      }
    }

    .good_detail {
      width: inherit;
      @apply text-[12px] h-[30px] absolute flex justify-center items-center text-[#fff];
      letter-spacing: 20px;
      background-color: rgba(153, 169, 191, 0.9);
      bottom: -31px;
      transition: all 0.5s linear;
    }
  }
}

.msg_box {
  @apply text-[14px] relative;
}
</style>